<template>
  <div class="app-container">

    <TopBar></TopBar>

    <div class="form-container">
      <div class="search-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-form-item prop="title">
            <el-input
              v-model="queryParams.title"
              placeholder="请输入标题"
              clearable
              style="width: 240px"
              @clear="handleQuery"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item prop="type">
            <el-select
              v-model="queryParams.type"
              placeholder="请选择报送类别"
              style="width: 240px"
              clearable
              @clear="handleQuery"
              @change="handleQuery"
            >
              <el-option
                v-for="(type, i) in dict.type.review_type_new"
                :key="type.value"
                :label="type.label"
                :value="type.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="dataRange"
              style="width: 240px"
              clearable
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @clear="handleQuery"
              @change="handleQuery"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
<!--            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table v-loading="loading" :data="list">
        <el-table-column
          label="序号"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column label="标题" align="center" prop="title" width="320" :show-overflow-tooltip="true"/>
        <el-table-column label="编号" align="center" prop="number"/>
        <el-table-column label="类型" align="center" prop="type">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.review_type_new" :value="scope.row.type"/>
          </template>
        </el-table-column>
        <el-table-column label="报送部门" align="center" prop="department"/>
        <el-table-column label="报送领导" align="center" prop="leader"/>
        <el-table-column label="登记人" align="center" prop="publisherName"></el-table-column>
        <el-table-column label="时间" align="center" prop="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleView(scope.row)"
            >查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </div>

    <el-dialog title="详情" :visible.sync="isOpen" @closed="detailClose">
      <el-form :model="ruleForm" ref="ruleForm" labelPosition="right" label-width="80px"
               label-position="right">

        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="快报编号" prop="articleTitle">
              <div>{{ruleForm.number}}</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="标题" prop="title">
              <el-input v-model="ruleForm.title" :maxlength="50" show-word-limit disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around" v-if="ruleForm.type <= 2">
          <el-col :span="23">
            <el-form-item label="网页链接" prop="url">
              <el-input v-model="ruleForm.url" show-word-limit disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="类别" prop="type">
              <el-select
                v-model="ruleForm.type"
                placeholder="请选择报送类别"
                style="width: 240px"
                clearable
                @change="handleQuery"
                :disabled="true"
              >
                <el-option
                  v-for="(type, i) in dict.type.review_type_new"
                  :key="type.value"
                  :label="type.label"
                  :value="type.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>



        <el-row type="flex" justify="space-around">

          <el-col :span="11">
            <el-form-item label="报送部门" prop="department">
              <el-input v-model="ruleForm.department" :maxlength="100" show-word-limit disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="报送领导" prop="leader">
              <el-input v-model="ruleForm.leader" :maxlength="50" show-word-limit disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="内容" prop="content">
              <div id="detailEditor"></div>
<!--              <div class="text-area" v-html="ruleForm.content"></div>-->
              <!-- <el-input class="text-area" type="textarea" v-html="ruleForm.content" disabled :rows="10"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around" v-if="ruleForm.attachInfoNewList && ruleForm.attachInfoNewList.length > 0">
          <el-col :span="23">
            <el-form-item label="样本附件" prop="attachInfos" style="float: left">
              <div v-if="ruleForm.attachInfoNewList">
                <div v-for="(item, i) in ruleForm.attachInfoNewList" :key="i"
                     style="display: flex; align-items: center; justify-content: flex-end">
                  <el-tooltip content="请去内网下载查看" placement="top">
                    <div style="margin: 0 20px 0 0">{{item.name}}</div>
                  </el-tooltip>

<!--                  <el-button type="text" @click="downloadFile(item)">下 载</el-button>-->
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>


  </div>
</template>

<script>
  import {getUserProfile} from "@/api/system/user";
  import {getReviewList, downloadFile, getReviewDetail} from "@/api/system/application"
  import {mapGetters} from "vuex";
  import {blobValidate} from "../../utils/ruoyi";
  import {Message} from "element-ui";
  import TopBar from "@/components/TopBar"
  import E from "wangeditor";

  export default {
    name: "record",
    dicts: ['review_type_new'],
    components: {
      TopBar
    },
    data() {
      return {
        user: {},
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          articleTitle: "",
          publisher: "",
          reviewType: ""
        },
        dataRange: [],
        list: [],
        total: 0,
        loading: false,
        netList: [
          {
            label: "境内",
            value: 1
          }, {
            label: "境外",
            value: 2
          }],
        isOpen: false,
        ruleForm: {},
        detailEditor: null
      }
    },
    computed: {
      ...mapGetters([
        'avatar',
      ]),
    },
    created() {
      this.getUser()
    },
    beforeDestroy() {
      if(this.detailEditor) {
        this.detailEditor.destroy()
        this.detailEditor = null
      }
    },
    methods: {
      //获取用户信息
      getUser() {
        getUserProfile().then(res => {
          this.user = res.data;
          this.queryParams.publisher = this.user.userName
          this.handleQuery()
        });
      },
      //查询
      handleQuery() {
        if (this.dataRange && this.dataRange.length > 0) {

          this.queryParams.startTime = this.dataRange[0]
          this.queryParams.endTime = this.dataRange[1]
        } else {
          this.queryParams.startTime = null
          this.queryParams.endTime = null
        }

        console.log(this.queryParams)
        getReviewList(this.queryParams).then(res => {
          if (res.code === 200) {
            this.list = res.rows
            this.total = res.total
          } else {

          }
        }).catch(err => {

        })
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.publisher = this.user.userName
        this.handleQuery();
      },
      //查看详情
      handleView(row) {
        this.isOpen = true
        // this.ruleForm = row

        getReviewDetail(row.id).then(res => {
          if(res.code === 200) {
            this.ruleForm = res.data
            this.$nextTick(() => {
              this.detailEditor = new E('#detailEditor')//创建对象
              this.detailEditor.config.menus = [
                "head",
                "bold",
                "fontSize",
                "fontName",
                "italic",
                "underline",
                "strikeThrough",
                "indent",
                "lineHeight",
                "foreColor",
                "backColor",
                "link",
                "list",
                "todo",
                "justify",
                "quote",
                "emoticon",
                "table",
                "code",
                "splitLine",
                "undo",
                "redo"
              ]
              this.detailEditor.create()
              let eds = document.getElementsByClassName('w-e-text-container')
              eds[0].style = eds[0].style.cssText + 'height: 200px'
              this.detailEditor.showMenuTooltips = false
              this.detailEditor.disable(() => {
                return true;
              })
              this.detailEditor.txt.html(this.ruleForm.content)
            })
          }
        })
      },
      downloadFile(file) {
        let payload = {
          resource: file.attachUrl
        }
        downloadFile(payload).then(async (data) => {
          const isBlob = blobValidate(data);
          if (isBlob) {
            const blob = new Blob([data])
            saveAs(blob, file.name)
          } else {
            const resText = await data.text();
            const rspObj = JSON.parse(resText);
            const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
            Message.error(errMsg);
          }
        })
 /*       let url = "http://192.168.0.124:9088" + file.attachUrl
        window.open(url)*/
      },
      detailClose() {
        this.isOpen = false
        this.ruleForm = {}
      }
    }
  }
</script>

<style lang="scss" scoped>

  .banner-user-avatar {
    float: left;
    width: 26px;
    height: 26px;
    margin-right: 6px;
    line-height: 26px;
    text-align: center;
    background-color: #409EFF;
    border-radius: 50%;
    border: 1px solid #fff;
  }

  .top-banner {
    position: fixed;
    height: 56px;
    width: 100vw;
    background-color: #031A2E;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    top: 0;
    left: 0;

    .logo-container {
      display: flex;
      align-items: center;

      .logo-title {
        font-family: PangMenZhengDao;
        font-size: 18px;
        color: #FFFFFF;
        margin-right: 12px;
        margin-left: 32px;
      }

      .version {
        background-image: linear-gradient(270deg, #76C0FF 0%, #1B58FF 100%);
        border-radius: 4px;
        font-family: Tensentype-RuiHeiJ-W5;
        font-size: 12px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3px 8px;
      }
    }

    .avatar-container {
      margin-right: 32px;
      position: relative;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;
        display: flex;
        align-items: center;
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0;

        .user-avatar {
          cursor: pointer;
          width: 30px;
          height: 30px;
          border-radius: 15px;
          margin-right: 13px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          margin-left: 56px;
          /*position: absolute;
          right: -20px;
          top: 25px;*/
          font-size: 12px;
        }
      }
    }
  }

  .form-container {
    /*overflow-y: scroll;*/
    margin-top: 56px;

    .search-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 21px;

      ::v-deep .el-form-item {
        margin-bottom: 0 !important;
      }

      .btn-container {
        display: flex;
        align-items: center;
      }
    }
  }

  .divide {
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #1F2329;
    letter-spacing: 0;
    position: relative;
    margin: 20px 0 12px;
    display: flex;
    align-items: center;
  }

  .text-area {
    background-color: #F5F7FA;
    border: 1px solid #dfe4ed;
    cursor: not-allowed;
    border-radius: 4px;
  }
</style>
